<template>
  <div class="box">
    <!-- 提示信息与添加按钮区域 -->
    <div style="margin-bottom: 15px">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <div style="font-size: 12px; color: pink" class="grid-content bg-purple textbox">
            说明：目前支持学科和关键字条件筛选
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple right">
            <el-button
              icon="el-icon-edit"
              type="success"
              size="mini"
              @click="$router.push({ path: '/questions/new' })"
              >新增试题</el-button
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表单区域 -->
    <div>
      <el-form ref="SearchForm" :model="formData" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="formData.subjectID" placeholder="请选择" @change="changeSubject">
                <el-option
                  v-for="item in subject"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="formData.catalogID" placeholder="请选择">
                <el-option
                  v-for="item in catalog"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="formData.tags" placeholder="请选择">
                <el-option
                  v-for="item in tags"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="formData.keyword" placeholder="根据题干搜索" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="formData.questionType" placeholder="请选择">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="formData.difficulty" placeholder="请选择">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="formData.direction" placeholder="请选择">
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :value="item"
                  :label="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="formData.creatorID" placeholder="请选择">
                <el-option
                  v-for="item in user"
                  :key="item.id"
                  :value="item.id"
                  :label="item.username"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="formData.remarks" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="formData.shortName" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <div class="alignment">
                <el-select
                  v-model="formData.province"
                  style="margin-right: 5px"
                  placeholder="请选择"
                  @change="changeCity"
                >
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    :value="item"
                    :label="item"
                  />
                </el-select>
                <el-select v-model="formData.city" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in citys"
                    :key="index"
                    :value="item"
                    :label="item"
                  />
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <div class="rightAlignment">
                <el-button @click="clear">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '../../api/hmmm/citys'
import { simple as subjectSimple } from '../../api/hmmm/subjects'
import { simple as directorysSimple } from '../../api/hmmm/directorys'
import { simple as tagsSimple } from '../../api/hmmm/tags'
import { simple as userSimple } from '../../api/base/users'
export default {
  name: 'QuestionsForm',
  data () {
    return {
      // 表单数据
      formData: {
        jectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      },
      questionType: questionType, // 试题类型选项
      difficulty: difficulty, // 题型难度选项
      direction: direction, // 方向选项
      subject: [], // 学科数据
      catalog: [], // 目录数据
      tags: [], // 标签数据
      user: [], // 录入人数据
      provinces: provinces(), // 所有城市
      citys: [] // 城市下地区
    }
  },
  created () {
    this.subjectSimpleFn()
    this.userSimpleFn()
  },
  methods: {
    // 获取学科数据
    async subjectSimpleFn () {
      const res = await subjectSimple()
      this.subject = res.data
    },
    // 获取目录数据
    async directorysSimpleFn () {
      const res = await directorysSimple(this.formData.jectID)
      this.catalog = res.data
    },
    // 获取标签数据
    async tagsSimpleFn () {
      const res = await tagsSimple()
      this.tags = res.data
    },
    // 获取录入人数据
    async userSimpleFn () {
      const res = await userSimple()
      this.user = res.data
    },
    // 学科发生改变触发的事件
    changeSubject () {
      this.formData.catalogID = ''
      this.formData.tags = ''
      this.directorysSimpleFn()
      this.tagsSimpleFn()
    },
    // 城市改变事件
    changeCity () {
      this.formData.city = ''
      this.citys = citys(this.formData.province)
    },
    // 清除事件
    clear () {
      this.formData = this.$options.data().formData
      this.$emit('clear')
    },
    // 搜索事件
    search () {
      this.$emit('seach', this.formData)
    }
  }
}
</script>

<style scoped>
.textbox {
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 6px;
}
.box {
  padding-right: 30px;
}
.right {
  text-align: end;
}
.el-select {
  width: 100%;
}
.el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.alignment {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rightAlignment {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
